<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-1-21
  Time: 上午9:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单信息</title>
    <mystyle>
    <link href="/public/css/orderDetail.css" rel="stylesheet" type="text/css"/>
    </mystyle>
</head>
<body>
<form:form commandName="orderDTO" action="/order/form">
    <form:hidden path="houseWeekGuid"/>
    <div class="orderTwo">
        <div class="otTop clearfix">
            <div class="ottTop">
                <img src="/public/img/orderDetailTopbg_01.png">
            </div>
            <div class="ottBottom clearfix">
                <p class="p1">订单信息</p>

                <p class="p2">确认并购买</p>
            </div>
        </div>

        <div class="otCenter">
            <div class="otcTop">
                <h3>订单信息</h3>
            </div>
            <table class="otcBottom">
                <tr class="needBorder">
                    <td>房屋信息</td>
                    <td>周次</td>
                    <td>份额单价（元）</td>
                    <td>数量</td>
                    <td>总金额（元）</td>
                </tr>
                <tr>
                    <td class="projectDetail">
                        <img src="/public/image/${orderDTO.houseInfoDTO.imageGuids[0]}"/>

                        <p>
                                ${orderDTO.houseInfoDTO.name}<br><br>
                            面积${orderDTO.houseInfoDTO.buildingTypeArea}㎡
                        </p>
                    </td>
                    <td>${orderDTO.houseWeekDTO.name}</td>
                    <td>￥<span id="price_item_0" class="price_item">${orderDTO.orderInfoDTO.singlePrice}</span></td>

                    <td class="numberRP clearfix">
                        <div class="reduce">
                            <a onClick="setAmount.reduce('#qty_item_0','#price_item_0','#total_item_0')"
                               href="javascript:void(0)">-</a>
                        </div>
                            <form:input path="orderInfoDTO.num" name="qty_item" value="1" id="qty_item_0"
                                        cssClass="orderNum"
                                        onKeyUp="setAmount.modify('#qty_item_0','#price_item_0','#total_item_0')"/>

                        <div class="plus">
                            <a href="javascript:setAmount.add('#qty_item_0','#price_item_0','#total_item_0')">+</a>
                        </div>
                    </td>
                    <td>
                        <div class="left buy">
                            <span class="total-font total_item" id="total_item_0">￥0.00</span>
                            <input type="hidden" name="total_price" id="total_price" value=""/>
                        </div>
                    </td>
                </tr>
            </table>
            <div class="otcBottom02">
                <p>总价：<span id="total">3680</span>元</p>
            </div>
        </div>

        <div class="otBottom">
            <div class="otbTop">
                <h3>信息填写</h3>
            </div>

            <div class="otbBottom">
                <div class="name">姓名：<form:input path="realName" id="realName" onblur="validRealName()"/><span></span>
                </div>
                <div class="phone">手机号：<form:input path="phoneNum" readonly="true" cssClass="buytxt01_k"/></div>
                <div class="IDcard">身份证：<form:input path="IDCard" id="IDCard" onblur="validIdCard()"/><span></span>
                </div>
                <div class="address">联系地址：
                    <form:select path="province" cssClass="sdtk02" id="province" onchange="findCity()">
                        <form:option value="noselect">请选择</form:option>
                        <c:forEach items="${orderDTO.provinces}" var="provinces">
                            <form:option value="${provinces.id}">${provinces.provinceName}</form:option>
                        </c:forEach>
                    </form:select>
                    <form:select path="city" cssClass="sdtk02" id="city" onchange="findDistrict()">
                        <c:forEach items="${orderDTO.cities}" var="cities">
                            <form:option value="${cities.id}">${cities.cityName}</form:option>
                        </c:forEach>
                    </form:select>
                    <form:select path="district" cssClass="sdtk02" id="district">
                        <c:forEach items="${orderDTO.districts}" var="districts">
                            <form:option value="${districts.id}">${districts.districtName}</form:option>
                        </c:forEach>
                    </form:select>
                    <form:input path="area" id="area" cssClass="buytxt01_k"/><span></span>
                </div>
            </div>
        </div>
        <div class="agree">
            <input type='checkbox' name='VoteOption1' onchange="VoteOption1Checked()" id="VoteOption1" value=1>我同意
            <span onclick="protocol();" style="color: mediumblue">《${orderDTO.houseInfoDTO.name}》</span>
            购买合同<br>
        </div>

        <div class="buyBtn">
            <input type="submit" id="submit" value="支付">
        </div>
    </div>
</form:form>

<div id="protocolPopup">
    <div class="protocolPad">
        <div class="protocolPopupMain">
            <h2>《${orderDTO.houseInfoDTO.name}》条款</h2> <span onclick="closeprotocol()" class="fa  fa-times"></span>
            <div class="protocolMain"> ${agreementDTO.content}
            </div>
        </div>
    </div>
</div>

 <script>
     function protocol(){
         document.getElementById("protocolPopup").style.display = "block"
     }
     function closeprotocol(){
         document.getElementById("protocolPopup").style.display = "none"
     }
     var sub = document.getElementById("submit");
     function VoteOption1Checked(){
        if(document.getElementById("VoteOption1").checked){
            sub.disabled = false;
        }else{
            sub.disabled=true;
        }
     }
 </script>
</body>
</html>